<template>
	<div class="product-property-form">
		<el-form label-width="100px" label-position="left" v-if="formData.length > 0">
			<el-form-item :label="item.property.name" v-for="item in formData" :key="item.id">
				<el-input v-model="item.value"
          @keyup.enter.native="$event.target.blur"
          @blur="changeValue(item)"
        ></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
  import {getProductProperties,editProductProperties} from '@/api/admin/product_property.js'
	export default{
		data() {
			return {
				formData: []
			}
		},
    methods: {
      getTableData() {
        let data = {
          pid:this.$route.query.productId
        }
        getProductProperties(data).then(res => {
          if(res.code == 200){
            this.formData = res.data
          }
        })
      },
      changeValue(item){
        // let data = new FormData()
        // data.append('product',this.$route.query.productId)
        // data.append('property',item.property.id)
        // data.append('value',item.value)
        // data.append('id',item.id)
		let data = {
			product:this.$route.query.productId,
			property:item.property.id,
			value:item.value,
			id:item.id
		}
        editProductProperties(data).then(res => {
          if(res.code == 200){
            this.$message({
              type:'success',
              message:'编辑成功'
            })
          }
        })
      }
    },
    created() {
      this.getTableData()
    }
	}
</script>

<style>
	.product-property-form{
		width: 70%;
		margin: 20px auto;
	}
	.product-property-form>form{
		padding: 20px 5%;
	}
	.product-property-form>form>div{
		width: 40%;
		float: left;
		margin-left: 5%;
	}
</style>
